import React from 'react';
import { Row, Col, Form, Input, DatePicker, Icon, Spin, Select } from 'antd';
import Button from '../ButtonPc';
import styles from '../index.less';

const { Option } = Select;

const EducationItem = ({ form, index, i, dictObj, dictObjLoading, remove, showDel, ...rest }) => {
    const { getFieldDecorator } = form;

    return (
        <div className={styles.formWrapNew}>
            <div className={styles.itemHead}>
                <div>教育背景{i + 1}</div>
                {showDel && (
                    <Icon
                        type="close-circle"
                        theme="filled"
                        style={{ fontSize: 16, color: '#49536C' }}
                        onClick={() => remove(index)}
                    />
                )}
            </div>
            <Row gutter={120} {...rest}>
                <Col lg={12} md={24}>
                    <Form.Item label="起止时间">
                        {getFieldDecorator(`educationStartTime[${index}]`, {
                            rules: [{ required: true, message: '请选择起止时间' }]
                        })(
                            <DatePicker.RangePicker
                                format="YYYY/MM/DD"
                                style={{ width: '100%' }}
                                placeholder="请选择起止时间"
                            />
                        )}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="学校">
                        {getFieldDecorator(`educationGraduateSchool[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入学校',
                                    whitespace: true
                                }
                            ]
                        })(<Input placeholder="请输入" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={120} {...rest}>
                <Col lg={12} md={24}>
                    <Form.Item label="专业">
                        {getFieldDecorator(`educationMajor[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入专业',
                                    whitespace: true
                                }
                            ]
                        })(<Input placeholder="请输入" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="学历">
                        <Spin spinning={dictObjLoading}>
                            {getFieldDecorator(`educationDegree[${index}]`, {
                                initialValue: undefined,
                                rules: [
                                    {
                                        required: true,
                                        message: '请选择学历'
                                    }
                                ]
                            })(
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                    style={{ width: '100%' }}
                                >
                                    {dictObj?.agreeType
                                        ?.filter(v => v.remark !== '1')
                                        .map(item => (
                                            <Option value={item.dictValue} key={item.dictValue}>
                                                {item.dictName}
                                            </Option>
                                        ))}
                                </Select>
                            )}
                        </Spin>
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="学制">
                        <Spin spinning={dictObjLoading}>
                            {getFieldDecorator(`educationAcademicYear[${index}]`, {
                                initialValue: undefined,
                                rules: [
                                    {
                                        required: true,
                                        message: '请选择学制'
                                    }
                                ]
                            })(
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                    style={{ width: '100%' }}
                                >
                                    {dictObj?.academicYear?.map(item => (
                                        <Option value={item.dictValue} key={item.dictValue}>
                                            {item.dictName}
                                        </Option>
                                    ))}
                                </Select>
                            )}
                        </Spin>
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );
};

const Education = ({ form, dictObj, dictObjLoading }) => {
    const { getFieldDecorator } = form;

    const addEducation = () => {
        const educationKeys = form.getFieldValue('educationKeys');
        const nowId = educationKeys[educationKeys.length - 1] + 1 || 0;
        const nextKeys = educationKeys.concat(nowId);
        form.setFieldsValue({
            educationKeys: nextKeys
        });
    };
    React.useEffect(() => {
        const educationKeys = form.getFieldValue('educationKeys');
        if (Array.isArray(educationKeys) && educationKeys.length === 0) {
            addEducation();
        }
    }, [form.getFieldValue('educationKeys')]);

    const removeEducation = React.useCallback(k => {
        const educationKeys = form.getFieldValue('educationKeys');
        form.setFieldsValue({
            educationKeys: educationKeys.filter(key => key !== k)
        });
    }, []);

    getFieldDecorator('educationKeys', { initialValue: [] });
    const educationKeys = form.getFieldValue('educationKeys');

    return (
        <>
            {educationKeys.map((key, i) => (
                <EducationItem
                    form={form}
                    key={key}
                    index={key}
                    i={i}
                    dictObj={dictObj}
                    dictObjLoading={dictObjLoading}
                    showDel={educationKeys?.length > 1}
                    remove={removeEducation}
                />
            ))}
            <div style={{ margin: '0 0 24px 0' }}>
                <Button block className={styles.addBtn} onClick={addEducation} disabled={educationKeys.length >= 10}>
                    <Icon type="plus" /> 添加教育经历
                </Button>
            </div>
        </>
    );
};

export default Education;
